<template>
  <el-container>
    <el-header>
      <svg
        t="1628817618003"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2394"
        width="55"
        height="55"
      >
        <path
          d="M397.355886 498.805029c-8.338286 0-15.140571 7.548343-15.140572 16.822857 0 9.259886 6.802286 16.822857 15.140572 16.822857h142.2336c8.352914 0 15.1552-7.562971 15.1552-16.822857 0-9.274514-6.802286-16.822857-15.1552-16.822857h-142.2336z m0-97.440915c-8.338286 0-15.140571 7.548343-15.140572 16.822857 0 9.274514 6.802286 16.822857 15.140572 16.822858h208.0768c8.352914 0 15.1552-7.548343 15.1552-16.822858 0-9.274514-6.802286-16.822857-15.1552-16.822857H397.355886z m312.919771 51.741257c-0.994743 0.892343-1.9456 1.901714-2.896457 2.852572L498.146743 665.775543c-3.657143 3.408457-5.749029 8.148114-5.705143 13.165714l0.4096 62.171429c0.043886 5.705143 2.340571 11.1616 6.436571 15.1552 0.965486 0.906971 1.960229 1.755429 3.013486 2.501485H340.260571A47.689143 47.689143 0 0 1 292.571429 711.094857V340.699429a47.689143 47.689143 0 0 1 47.689142-47.689143h322.325943a47.689143 47.689143 0 0 1 47.689143 47.689143v112.391314z"
          fill="#377FFC"
          p-id="2396"
        ></path>
        <path
          d="M712.557714 487.745829l6.144-6.144a51.346286 51.346286 0 0 1 74.693486-0.2048l9.098971 9.157485a52.867657 52.867657 0 0 1 16.603429 37.888 53.0432 53.0432 0 0 1-15.594057 38.2976l-3.013486 2.998857-87.932343-81.993142zM524.829257 676.337371l87.844572 81.890743-0.658286 0.643657a18.432 18.432 0 0 1-13.458286 4.096l-56.437028-0.351085a19.807086 19.807086 0 0 1-14.087315-5.749029 19.602286 19.602286 0 0 1-5.909943-13.897143l-0.351085-56.992914c-0.087771-3.510857 1.009371-6.846171 3.057371-9.654857z m14.292114-14.657828L698.1632 502.198857l87.932343 82.037029L627.068343 743.716571l-87.946972-82.037028z"
          fill="#ABC6F6"
          p-id="2397"
        ></path>
        <path
          d="M726.1184 441.270857V324.022857a43.885714 43.885714 0 0 0-43.885714-43.885714H338.783086a47.645257 47.645257 0 0 1 39.862857-21.504h322.325943a47.689143 47.689143 0 0 1 47.689143 47.689143v112.405943c-0.994743 0.892343-1.9456 1.901714-2.896458 2.837942l-19.646171 19.704686z"
          fill="#377FFC"
          p-id="2398"
        ></path>
      </svg>
      <span>记账工具</span>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-row>
          <el-col :span="24">
            <router-link to="/home/addlog" tag="div">
              <el-button type="primary" icon="el-icon-circle-plus-outline"
                >记账</el-button
              >
            </router-link>
          </el-col>
        </el-row>
        <el-menu default-active="/home/homepage" :router="true">
          <el-menu-item index="/home/homepage">
            <i class="el-icon-house"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/home/browseall">
            <i class="el-icon-document"></i>
            <span slot="title">所有记录</span>
          </el-menu-item>
          <el-menu-item index="/home/setting">
            <i class="el-icon-setting"></i>
            <span slot="title">基本设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
module.exports = {
  data() {
    return {
      label: 123,
    };
  },
  methods: {},
};
</script>

<style scoped>
.el-container {
  height: 100%;
}

.el-aside {
  border-right: solid 1px #e6e6e6;
}

.el-menu {
  border-right: none;
}

.el-header {
  display: flex;
  border-bottom: solid 1px #e6e6e6;
  font-size: 26px;
  align-items: center;
}

.el-header svg {
  width: 55px;
  height: 55px;
}

.el-col {
  text-align: center;
  padding: 15px 0;
}
</style>